<template>
  <div class="home">
    <swiper :options="swiperOptions">
      <swiper-slide>
        <img class="w-100" src="../assets/images/861d788ae21563e0ae570b2f12563316.jpeg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/897aadd9d3897775c5aa08b4b89f5382.jpeg" alt="" />
      </swiper-slide>
      <swiper-slide>
        <img class="w-100" src="../assets/images/a31019baec6ae1ff3447eb30aa0571bc.jpeg" alt="" />
      </swiper-slide>
      <div class="swiper-pagination pagination-home text-right pr-3 pb-2" slot="pagination"></div>
    </swiper>
    <!-- end of swiper -->
    <div class="nav-icons bg-white mt-3 pt-3 text-center text-dark">
      <div class="d-flex flex-wrap" v-if="isShowMore">
        <div class="nav-item mb-3">
          <i class="sprite sprite-news"></i>
          <div class="py-2 nav-text">爆料站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-story"></i>
          <div class="py-2 nav-text">故事站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-shop"></i>
          <div class="py-2 nav-text">周边商城</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-test"></i>
          <div class="py-2 nav-text">体验服</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-newplayer"></i>
          <div class="py-2 nav-text">新人专区</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-extend"></i>
          <div class="py-2 nav-text">荣耀·传承</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-camp"></i>
          <div class="py-2 nav-text">王者营地</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-weixin"></i>
          <div class="py-2 nav-text">公众号</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-version"></i>
          <div class="py-2 nav-text">版本介绍</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-environment"></i>
          <div class="py-2 nav-text">对局环境</div>
        </div>
      </div>
      <div class="d-flex flex-wrap" v-else>
        <div class="nav-item mb-3">
          <i class="sprite sprite-news"></i>
          <div class="py-2 nav-text">爆料站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-story"></i>
          <div class="py-2 nav-text">故事站</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-shop"></i>
          <div class="py-2 nav-text">周边商城</div>
        </div>
        <div class="nav-item mb-3">
          <i class="sprite sprite-test"></i>
          <div class="py-2 nav-text">体验服</div>
        </div>
      </div>
      <div class="bg-light py-2 fs-sm" @click="toggleShowMore">
        <div class="take-down" v-if="isShowMore">
          <i class="sprite sprite-arrow"></i>
          <span>收起</span>
        </div>
        <div class="take-up" v-else>
          <i class="sprite sprite-arrow-reverse"></i>
          <span>展开</span>
        </div>
      </div>
    </div>
    <!-- end of nav icons -->
    <m-list-card icon="cc-menu-circle" title="新闻资讯" :categories="newsCats">
      <template #items="{category}">
        <router-link tag="div" v-for="(item, i) in category.newsList" :key="i" :to="`/articles/${item._id}`"
          class="py-2 fs-lg d-flex">
          <span class="text-info">[{{ item.categoryName }}]</span>
          <span class="px-2">|</span>
          <span class="flex-1 text-dark-1 text-ellipsis pr-2">{{
            item.title
          }}</span>
          <span class="fs-sm text-gray">{{ item.createdAt | date }}</span>
        </router-link>
      </template>
    </m-list-card>
    <m-list-card icon="card-hero" title="英雄列表" :categories="heroCats">
      <template #items="{category}">
        <div class="d-flex flex-wrap" style="margin:0 -0.5rem">
          <router-link :to="`/heroes/${hero._id}`" tag="div" v-for="(hero, i) in category.heroList" :key="i"
            class="p-2 text-center" style="width:20%">
            <img :src="hero.avatar" alt="" class="w-100">
            <div>{{hero.name}}</div>
          </router-link>
        </div>
      </template>
    </m-list-card>
    <!-- end of hero -->
    <m-list-card icon="video" title="精彩视频" :categories="videoCats">
      <template #items="{category}">
        <div class="video-container">
          <ul class="video-list d-flex flex-wrap">
            <li class="video-item px-1" v-for="(video,i) in category.videoesList" :key="i" style="width:50%">
              <a href="#" :title="category.title" class="video-a">
                <img :src="video.image" class="video-image w-100" alt="">
              </a>
              <span class="video-title mt-2 mb-1">{{video.title}}</span>
              <div class="video-info mb-3 d-flex">
                <div class="video-play">
                  <i class="sprite sprite-video"></i>
                  <span class="play-num fs-sm pl-3 text-gray-3">{{video.play}}</span>
                </div>
                <div class="video-time">
                  <span class="time-str fs-sm text-gray-3">{{video.time}}</span>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </template>
    </m-list-card>
  </div>
</template>

<script>
import dayjs from 'dayjs'
export default {
  filters: {
    date (val) {
      return dayjs(val).format('MM/DD')
    }
  },
  data () {
    return {
      swiperOptions: {
        autoplay: true,
        pagination: {
          el: '.swiper-pagination'
        }
        // Some Swiper option/callback...
      },
      swiperSliders: [1, 2, 3, 4, 5],
      newsCats: [],
      heroCats: [],
      videoCats: [],
      isShowMore: false
    }
  },
  methods: {
    async fetchNewsCats () {
      const res = await this.$http.get('news/list')
      this.newsCats = res.data
      console.log(this.newsCats)
    },
    async fetchHeroCats () {
      const res = await this.$http.get('heroes/list')
      this.heroCats = res.data
      console.log(this.heroCats)
    },
    async fetchVideoCats () {
      const res = await this.$http.get('videoes/list')
      this.videoCats = res.data
      console.log(this.videoCats)
    },
    toggleShowMore () {
      this.isShowMore = !this.isShowMore
    }
  },
  created () {
    this.fetchNewsCats()
    this.fetchHeroCats()
    this.fetchVideoCats()
  }
}
</script>

<style lang="scss" scoped>
@import '../assets/scss/variables';

.pagination-home {
  .swiper-pagination-bullet {
    border-radius: 0.1538rem !important;
    background: map-get($colors, 'white');
    opacity: 1;
    &.swiper-pagination-bullet-active {
      background-color: map-get($colors, 'info');
    }
  }
}
.nav-icons {
  border-top: 1px solid $border-color;
  border-bottom: 1px solid $border-color;
  .nav-item {
    width: 25%;
    height: 3.8462rem;
    border-right: 1px solid $border-color;
    position: relative;
    &:nth-child(4n) {
      border-right: none;
    }
    .nav-text {
      position: absolute;
      top: 1.9231rem;
      left: 50%;
      transform: translateX(-50%);
      white-space: nowrap;
    }
  }
}
.video-container {
  .video-list {
    padding: 0;
    list-style: none;
    .video-item {
      .video-a {
        width: 11.3846rem;
        height: 6.9231rem;
      }
      .video-title {
        width: 11.3846rem;
        text-overflow: ellipsis;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }
      .video-info {
        justify-content: space-between;
        align-items: center;
        .video-play {
          position: relative;
          .sprite-video {
            position: absolute;
            top: -0.1538rem;
          }
        }
      }
    }
  }
}
</style>
